import React from 'react';

class LifeCycle extends React.Component {
  // 构造方法
  constructor(props) {
    super(props);
    console.log("constructor()");
  }

  // 组件挂载后调用
  componentDidMount() {
    console.log("componentDidMount()");
  }

  // 在组件完成更新后立即调用。在初始化时不会被调用。
  componentDidUpdate() {
    console.log("componentDidUpdate()");
  }

  // 在组件从 DOM 中移除之前立刻被调用。
  componentWillUnmount() {
    console.log("componentWillUnmount()");
  }

  // 每当 this.props 或 this.state 有变化，在 render 方法执行之前，就会调用这个方法。
  // 该方法返回一个布尔值，表示是否应该继续执行 render 方法，即如果返回false，UI 就不会更新，默认返回true。
  // 组件挂载时，render方法的第一次执行，不会调用这个方法。
  shouldComponentUpdate(nextProps, nextState){
    console.log("shouldComponentUpdate()");
    return true;
  }

  // 组件每次渲染时调用
  render() {
    console.log("render()")
    return (
      <div>
        <h1>React Life Cycle!</h1>
        <button onClick={ () => this.setState({update: true}) }>触发更新</button>
      </div>
    );
  }
}

export default LifeCycle;